"use client"

import Link from "next/link"
import { useRouter, usePathname } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Cloud, Folder, Share2, LogOut } from "lucide-react"

export function Sidebar() {
  const router = useRouter()
  const pathname = usePathname()

  const isSharesActive = pathname?.startsWith("/drive/shares")
  const isDriveActive = pathname?.startsWith("/drive") && !isSharesActive

  const handleLogout = () => {
    localStorage.removeItem("driveJWTToken")
    router.push("/login")
  }

  return (
    <aside className="w-64 border-r border-border bg-card flex flex-col">
      <div className="p-6 border-b border-border">
        <Link href="/" className="flex items-center gap-2 text-foreground transition-colors hover:text-primary">
          <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary">
            <Cloud className="h-5 w-5 text-primary-foreground" />
          </div>
          <span className="text-xl font-semibold">云存</span>
        </Link>
      </div>

      <nav className="flex-1 p-4 space-y-2">
        <Button variant={isDriveActive ? "default" : "ghost"} className="w-full justify-start gap-3" asChild>
          <Link href="/drive">
            <Folder className="h-5 w-5" />
            我的文件
          </Link>
        </Button>
        <Button variant={isSharesActive ? "default" : "ghost"} className="w-full justify-start gap-3" asChild>
          <Link href="/drive/shares">
            <Share2 className="h-5 w-5" />
            分享记录
          </Link>
        </Button>
      </nav>

      <div className="p-4 border-t border-border">
        <Button
          variant="ghost"
          className="w-full justify-start gap-3 text-muted-foreground hover:text-foreground"
          onClick={handleLogout}
        >
          <LogOut className="h-5 w-5" />
          退出登录
        </Button>
      </div>
    </aside>
  )
}
